<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-06-30 17:48:25
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-12-18 21:11:08
 * @FilePath: \dance\pages\me\teacherWindow.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="teacher">
    <uv-status-bar bgColor="#fff"></uv-status-bar>
    <view class="teacher-navbar">
      <!--自定义头部 -->
      <zy-navbar></zy-navbar>
    </view>
    <view class="teacher-title">
      <uv-avatar :src="headerpic" size="178rpx" mode="aspectFill"></uv-avatar>
      <view class="teacher-title-info">
        <text class="teacher-title-info-name" selectable user-select>
          {{ httpData?.username }}
        </text>
        <text class="teacher-title-info-num" selectable user-select>去卡号：{{ httpData.serial }}</text>
      </view>
    </view>
    <view class="teacher-other">
      <view class="teacher-other-item">
        <text class="text">擅长舞种：</text>
        <view class="dances">
          <view v-for="(item, index) in dances" :key="index" class="dances-item">
            {{ item }}
          </view>
        </view>
      </view>
      <view class="teacher-other-item content-text">
        {{ httpData?.description?.content }}
      </view>
    </view>
    <view class="teacher-button">
      <view class="teacher-button-item">
        <uv-line direction="col" color="#b1b1b1" margin="0 20.93rpx" length="34.884rpx"></uv-line>
        <button open-type="share" class="reset-button button">分享</button>
      </view>
      <view class="teacher-button-item">
        <uv-line direction="col" color="#b1b1b1" margin="0 20.93rpx" length="34.884rpx"></uv-line>
        <view class="button" @click.stop="httpCollect(item)" :style="{ color: '#B1B1B1' }">
          {{ httpData.collected?.id ? '已收藏' : '+收藏' }}
        </view>
      </view>
    </view>
    <view class="teacher-tabs">
      <view class="teacher-tabs-line"></view>
    </view>
    <view class="content">
      <swiper :current="current" class="content-swiper">
        <swiper-item class="item">
          <flow :data="ajax.list" @onScroll="onScroll" :top="top" @scrolltolower="scrolltolower"></flow>
        </swiper-item>
      </swiper>
    </view>
  </view>
  <uv-toast ref="toastRef"></uv-toast>
</template>

<script setup>
  import { onLoad, onShow, onReady } from '@dcloudio/uni-app';
  import flow from '@/pages/index/index3Compontents/flow.vue';
  import { ref, watch, reactive, getCurrentInstance, nextTick, computed } from 'vue';
  import debounce from '@/uni_modules/uv-ui-tools/libs/function/debounce.js';
  import { defaultImages } from '@/common/js/global.js';
  import store from '@/store/index.js'; //需要引入store
  import { getWeek } from '@/common/js/fn.js';
  const instance = getCurrentInstance();
  const query = uni.createSelectorQuery().in(instance.proxy);
  let params = reactive({
    pageSize: 10,
    currentPage: 1,
    classify: 'Teacher',
    sort: 0
  });
  let ajax = reactive({
    list: []
  });

  let { state } = store;
  let top = ref(0);
  let httpData = ref({});
  const list = [{ name: '课程' }, { name: '视频' }];
  let current = ref(0);
  let headerpic = computed(() => {
    return httpData.value.profilePhoto || defaultImages[2];
  });
  onReady(() => {
    nextTick(async () => {
      query
        .select('.content')
        .boundingClientRect(data => {
          top.value = data.top;
        })
        .exec();
    });
  });
  let dances = computed(() => {
    return (httpData.value.dances || []).map(r => r.name);
  });
  let routerId = ref();
  const httpDetail = async () => {
    httpData.value = await uni.$uv.http.post('app/teacher/detail', { id: routerId.value });
    let { videos, lessons } = httpData.value;
    let data = videos
      .map(r => {
        return { ...r, classify: 'Video' };
      })
      .concat(
        lessons.map(r => {
          return { ...r, classify: 'Lesson' };
        })
      );
    uni.$uv.mpShare = {
      title: `#去卡#我是 ${httpData.value.username}`, // 默认为小程序名称
      path: `/pages/me/share?id=${httpData.value.id}` // 默认为当前页面路径路径
    };
    ajax.list = data.map((r, i) => {
      let videoAddress = '',
        cover = '',
        autoVideo = false,
        teacher,
        title,
        lesson;
      if (r.classify === 'Video') {
        videoAddress = r.address;
        cover = r.cover;
        teacher = {
          name: httpData.value.username,
          avatar: headerpic.value,
          id: httpData.value.id
        };
        title = r.title;
      } else {
        videoAddress = r.video.address;
        lesson = {
          grade: r.lesson.grade || 1,
          name: r.lesson.name,
          merchant: r.merchant.headquater?.name + ` (${r.merchant?.name})`,
          time: getWeek(r.issueDate) + ' ' + r.timeDuration
        };
        cover = r.video.cover;
      }
      if (['Lesson','MerchantLesson', 'Video'].includes(r.classify) && [0, 1].includes(i)) {
        autoVideo = true;
      }
      return { ...r, autoVideo, videoAddress, cover, teacher, title, lesson };
    });
  };
  onLoad(options => {
    routerId.value = Number(options.id);
    current.value = 0;
    httpDetail();
  });
  // #region 操作上面的类目
  const onTabsChange = index => {
    current.value = index;
  };
  // #endregion
  const toastRef = ref();
  let httpCollect = async () => {
    await uni.$uv.http.post(`app/collect/${!httpData.value.collected.id ? 'add' : 'cancel'}`, {
      classify: 'Teacher', //收藏类型
      objid: httpData.value.id, //收藏对象的数据ID
      optype: 'collect' //操作类型
    });
    httpData.value.collected.id = httpData.value.collected.id ? 0 : 1;
    toastFn(toastRef.value, `${httpData.value.collected.id ? '' : '取消'}收藏成功`, 'success');
  };
  onShow(() => {
    setTimeout(() => {
      // 如果是个老师就去老师的页面，如果不是就去首页
      uni.$uv.mpShare = {
        title: `#去卡#我是 ${httpData.value.username}`, // 默认为小程序名称
        path: `/pages/me/share?id=${httpData.value.id}` // 默认为当前页面路径路径
      };
    });
  });
  let scrollOldTop = ref(0),
    scrollActive = ref(0);
  let autoVideo = () => {
    ajax.list.forEach(r => {
      r.autoVideo = false;
    });
    let num = scrollActive.value;
    // 如果是竖着的，那下个也要播放
    if (['Lesson','MerchantLesson', 'Video'].includes(ajax.list[num].classify) && ['Lesson','MerchantLesson', 'Video'].includes(ajax.list[num + 1].classify)) {
      ajax.list[num + 1].autoVideo = true;
    }
    ajax.list[num].autoVideo = true;
  };
  // 滚动事件，然后加了个防抖
  const onScroll = ({ detail, active }) => {
    scrollOldTop.value = detail.scrollTop;
    scrollActive.value = active;
    autoVideo();
  };
  // 滚动到底部
  const scrolltolower = active => {
    scrollActive.value = active;
    autoVideo();
  };
</script>

<style lang="scss" scoped>
  .teacher {
    height: 100vh;
    overflow-y: auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    color: #000000;
    font-size: 22.674rpx;
    color: #959595;
    font-family: Source Han Sans CN;

    &-navbar {
      margin-left: 23rpx;
    }
    &-title {
      display: flex;
      font-size: 23rpx;
      margin-left: 37rpx;
      &-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-left: 34.884rpx;
        color: #959595;
        &-name {
          font-size: 34.884rpx;
          margin-bottom: 12.209rpx;
          color: #000;
          font-weight: 700;
        }
      }
    }
    &-other {
      font-size: 28rpx;
      margin: 55.814rpx 47.093rpx 104.651rpx 47.093rpx;
      &-item {
        display: flex;
        color: #959595;
        .text {
          white-space: nowrap;
        }
        .dances {
          display: flex;
          flex-wrap: wrap;
          color: #959595;
          &-item {
            font-size: 24.419rpx;
            background-color: #b1b1b1;
            height: 38rpx;
            line-height: 38rpx;
            box-sizing: border-box;
            color: #000;
            padding: 0 21rpx;
            border-radius: 24rpx;
            margin-right: 23rpx;
            margin-bottom: 12.209rpx;
          }
        }
      }
      .content-text {
        line-height: 41.86rpx;
      }
      &-item:first-child {
        margin-bottom: 55.814rpx;
      }
    }
    &-button {
      display: flex;
      justify-content: flex-end;
      margin: 0 58rpx;
      margin-bottom: 45rpx;
      &-item {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .button {
          height: 51rpx;
          width: 124rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: $dance-main-color;
          font-size: 28rpx;
          margin-left: 14rpx;
        }
      }
    }
    &-tabs {
      &-line {
        margin: 0 26.163rpx;
        height: 19.186rpx;
        background-color: #ff7a66;
        border-radius: 34.884rpx;
        margin-bottom: 64.535rpx;
      }
    }
  }
  .content {
    &-swiper {
      height: 100%;
    }
  }
</style>
